<template>

    <div class="container">
        <div style="margin-bottom: 10px">
            <el-button size="small" type="primary" @click="addUserDialog = true" v-text="$t('add_user')">
            </el-button>
            <el-button size="small" type="danger"  v-text="$t('del_user')" @click="deleteUser(undefined)"></el-button>
            <!--</el-button-group>-->
        </div>
        <el-table :data="table.data" @selection-change="selsChange" border style="width: 100%">
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" :index="indexMethod" :label="$t('No_')"> </el-table-column>
            <el-table-column prop="username" :label="$t('username')"></el-table-column>
            <el-table-column prop="phone" :label="$t('phone')"></el-table-column>
            <el-table-column prop="email" :label="$t('email')"></el-table-column>
            <el-table-column prop="userRemark" :label="$t('userRmark')"></el-table-column>
            <el-table-column prop="sysUserStatus" :label="$t('userstatus')">
                <template slot-scope="scope">
                    <el-tag type="success" v-text="$t('normal')" v-if="scope.row.sysUserStatus == 1"></el-tag>
                    <el-tag type="info" v-text="$t('freeze')" v-if="scope.row.sysUserStatus == 2"></el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="roleId" :label="$t('operate')">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini"   @click="displayEditUserDialog(scope.row)" v-text="$t('EditUser')" ></el-button>
                    <el-button type="danger" size="mini"  @click="deleteUser(scope.row.userId)" v-text="$t('Delete')" ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination align="right" style="margin-top: 5px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="table.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="table.total">
        </el-pagination>

        <adduserDialog :addUserDialog='addUserDialog'></adduserDialog>
        <edituser-dialog :editUserDialog='editUser.editUserDialog' :userData="editUser.userData"></edituser-dialog>
    </div>
</template>

<script>
    import elTree from '../common/ElTree.vue'
    import roleList from '../common/RoleList.vue'
    import adduserDialog from './usercomponents/AddUser'
    import edituserDialog from './usercomponents/EditUser'

    export default {
        data() {
            return {
                addUserDialog : false,
                editUser : {
                    editUserDialog : false,
                    userData : {},
                },
                table : {
                    data : [],
                    currentPage : 1,
                    pageSize : 10,
                    total : 0
                },
                delUserIds : [],
            }
        },

        methods: {
            displayEditUserDialog(userData){
                let vm = this;
                vm.$http
                    .get('sys/findAllRoles_userRole', {
                        params:{
                            uid : userData.userId,
                        },

                    })
                    .then(function (response) {
                        if(response.data){
                            vm.editUser.userData = response.data.userInfo;
                            vm.editUser.userData.password = "";
                            vm.editUser.userData.passwordAgain = "";
                            vm.editUser.userData.roleIds = response.data.roleIds
                            vm.editUser.editUserDialog = true;
                        }else {
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            indexMethod(index) {
                let vm = this;
                let curPage = vm.table.currentPage;
                let pageSize = vm.table.pageSize;
                index = (curPage - 1) * pageSize + index + 1;
                return index;
            },
            selsChange(sels) {
                //被选中的行组成数组
                var tmpSel = [];
                for(var index in sels){
                    tmpSel.push(sels[index].userId);
                }
                this.delUserIds = tmpSel;
            },
            deleteUser(userId){
                let vm = this
                var tmpSel = [];
                if(userId != undefined){
                    tmpSel.push(userId);
                    vm.delUserIds = tmpSel;
                }
                // console.log(vm.delUserIds)
                vm.$http
                    .post('sys/DeleteUserByID', {
                        userIds:JSON.stringify(vm.delUserIds)
                    })
                    .then(function (response) {
                        if(response.data.result){
                            vm.$message({
                                message: vm.$t('Success'),
                                type: 'success'
                            });
                            vm.getUserTableData();
                        }else {
                            vm.$message.error(vm.$t('Failed'));
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            handleClose(done) {
            },
            updateName(name) {
                this.roleName = name
            },
            getUserTableData() {
                var vm = this
                vm.$http
                    .get('sys/QueryUser',{
                            params: {
                                'currentPage': vm.table.currentPage,
                                'pageSize': vm.table.pageSize,
                            }
                        }
                    )
                    .then(function (response) {
                        vm.table.data = response.data.data;
                        vm.table.total = response.data.total;
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.dialogFormVisible = false
            },
            handleSizeChange(val) {
                let vm = this
                vm.table.pageSize = val
                vm.getUserTableData()
            },
            handleCurrentChange(val) {
                let vm = this
                vm.table.currentPage = val
                vm.getUserTableData()

            },
        },
        components: {
            elTree,
            roleList,
            adduserDialog,
            edituserDialog,
        },
        created: function () {
            //这个是钩子函数
            var vm = this
            vm.getUserTableData()
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*.el-dialog .el-input{*/
        /*width: 512px;*/
    /*}*/
</style>
